<template>
    <!-- 风险清单 -->
    <div class="system3Das">
        <div class="system3DasDiv">
            <div class="system3_main">
                <h1>操作规程名称</h1>
                <p> {{model.OperateName}}</p>
            </div>
            <ul class="mainUl3">
                <li>
                    <h5>
                        操作规程内容
                    </h5>
                    <h6>{{model.OperateRemark}}</h6>

                </li>
                <li>
                    <h5>附件信息</h5>
                    <a :download="item.name"
                       v-for="(item,index) in model.FileName"
                       :key="index">
                        <h6>{{item.name}}</h6>
                    </a>
                </li>
                <li>
                    <span class="uptime">上传时间</span>
                    <em>{{model.CreateDate}}</em>
                </li>
            </ul>
            <div class="queryBtn"
                 @click="goPreview">全文预览</div>
        </div>
        <!-- <p v-if="!nodata" class="noDestail">暂无数据...</p> -->
        <!-- <noData v-if="listArr == 0"></noData> -->
        <myMenu @clickBack="back"
                backPath="/Index/newEdit"></myMenu>

    </div>
</template>
<script>
import { Actionsheet, Datetime, Radio } from 'vux'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        Radio,
        myMenu,
        Datetime,
        Actionsheet
    },
    data () {
        return {

            show: false,
            name1: '',
            name2: '',
            name3: '',
            parmas: {
                allowPaging: 'true',
                business: 'GetRiskclassificationControl',
                data: {
                    departId: '',
                    SourceLevel: '',
                    IsBigSource: 0,
                    AccidentType: '',
                    Date: ''
                },
                pageIndex: 0,
                pageSize: 20000,
                tokenId: '',
                userId: ''
            },
            listArr: [],
            nodata: true,
            list1: [],
model: {
                OperateName: '',
                OperateRemark: '',
                FileName: [],
                CreateUser: '',
                CreateDate: '',
                ID: ''
            }
        }
    },
    created () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.OperateProceduresList = JSON.parse(
            window.localStorage.getItem('OperateProceduresList')
        )
        this.parmas.userId = token.userid
        if (window.sessionStorage.getItem('name1')) {
            this.name1 = window.sessionStorage.getItem('name1')
            this.parmas.data.departId = window.sessionStorage.getItem('departId')
        } else {
            this.name1 = token.deptname
            this.parmas.data.departId = token.deptid
        }
        if (window.sessionStorage.getItem('name2')) {
            this.name2 = window.sessionStorage.getItem('name2')
            this.parmas.data.SourceLevel = window.sessionStorage.getItem('name2')
        }
        if (JSON.parse(window.sessionStorage.getItem('name3'))) {
            var name = JSON.parse(window.sessionStorage.getItem('name3'))
            var name3 = ''
            for (var k of name) {
                name3 += k + ','
                // console.log(name3, 1990);
            }
            this.name3 = name3.substring(0, name3.length - 1)
            this.parmas.data.AccidentType = this.name3
        }
        this.getInfo()
    },
    mounted () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        this.dataArr()
    },
    methods: {
        back () {
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('departId')
            window.sessionStorage.removeItem('name2')
            window.sessionStorage.removeItem('name3')
        },
        go2 () {
            window.sessionStorage.clear()
            this.$router.push('./riskMonitoring')
        },
        go3 () {
            window.sessionStorage.clear()
            this.$router.push('./riskInfo')
        },
        go4 () {
            window.sessionStorage.clear()
            this.$router.push('./riskInfo')
        },
        change1 (value) {
            window.sessionStorage.setItem('time', value)
        },
        change2 (value) {
            window.sessionStorage.setItem('time', value)
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.parmas).then(res => {
                // console.log(res, 159);
                if (res.status == 200) {
                    this.listArr = res.data.data
                    this.total = res.data.count
                    if (res.data.data != null && res.data.data.length > 0) {
                        this.nodata = true
                    } else {
                        this.nodata = false
                    }
                }
            })
        },
        query () {
            this.dataArr()
        },
        getInfo () {
            this.model = this.OperateProceduresList
        },
        // 预览
        goPreview () {
            if (this.model.FileName[0].url) {
                this.$router.push({
                    path: '/listmenus',
                    query: {
                        src: this.model.FileName[0].url
                    }
                })
            }
        }
    }
}
</script>
<style lang="less" scope>
.system3Das {
    width: 100%;
    height: 100%;
    font-size: 14px;
    background-color: #fff;
    .system3DasDiv {
        width: 100%;
        background-color: #fff;
        .system3_main {
            height: 70px;
            width: 100%;
            padding: 4px 20px 0;
            background-color: #fff;
            border-bottom: 10px solid #ebeef3;
            h1 {
                height: 30px;
                line-height: 30px;
                // font-size: 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #666;
                font-size: 14px;
                font-weight: normal;
            }
            p {
                height: 20px;
                line-height: 20px;
                // font-size: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #999;
                font-size: 14px;
            }
        }
        .uptime {
            //   font-weight: bold;
            font-size: 14px;
            color: #666;
        }
        .mainUl3 {
            width: 100%;
            padding: 10px 20px;
            li {
                border-bottom: 1px solid #f0eff5;
                padding: 10px 0;
                position: relative;
                min-height: 60px;
                h5 {
                    height: 30px;
                    line-height: 30px;
                    //   font-size: 18px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #666;
                    font-weight: normal;
                    font-size: 14px;
                    span {
                        float: right;
                        color: #226afd;
                    }
                }
                h6 {
                    height: 20px;
                    line-height: 20px;
                    margin: 4px 0;
                    //   font-size: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #999;
                    font-size: 14px;
                }
                div {
                    margin-bottom: 10px;
                    p {
                        line-height: 20px;
                        margin-top: 10px;
                        color: #959595;
                    }
                }
                .vux-x-icon {
                    fill: #999;
                    float: right;
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 30px;
                    right: 0;
                }
                span,
                em {
                    height: 40px;
                    line-height: 40px;
                }
                span {
                    color: #666;
                    float: left;
                    font-size: 14px;
                }
                em {
                    color: #999;
                    float: right;
                    font-size: 14px;
                }
            }
        }
    }
    .weui-actionsheet {
        top: 50%;
        // width: 90%;
        // left: 20px;
        background-color: rgba(0, 0, 0, 0);
    }
    .weui-actionsheet__menu {
        margin: 0 auto;
        width: 90%;
        height: 300px;
        overflow-y: auto;
        line-height: 20px;
        border-radius: 10px;
    }
    .vux-actionsheet-menu-default {
        padding: 10px !important;
        text-align: left;
    }
    .queryBtn {
        display: block;
        height: 40px;
        line-height: 40px;
        left: 40px;
        margin: 25px auto;
        text-align: center;
        width: 200px;
        border-radius: 20px;
        background-color: #2269ff;
        letter-spacing: 4px;
        color: #fff;
    }
}
</style>
